<template>
  <div class="tab box">
    <div @click="changeTab(index)" :class="{'act': actTabIndex == index}" :value="item" :key="item" v-for="(item, index) in tab" class="tab-item box box-ver box-f1 box-ac box-jc w-p100">
      <div class="icon icon-item"></div>
      <div class="text">{{item}}</div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'loading',
  props: {
    actTabIndex: {
      type: Number,
      default () {
        return -1
      }
    }
  },
  data () {
    return {
      tab: ['首页', '发票包', '我的']
    }
  },
  methods: {
    changeTab (index) {
      this.$emit('changeTab', index)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/config';
.tab{
  height:1rem;
  border-top:1px solid #d1d1d1;
  font-size:.20rem;
  color:#686868;
  .icon-item{
    width:.5rem;
    height:.5rem;
  }
  .text{
    padding-top:.05rem;
  }
  @for $i from 1 through 3 {
    .tab-item:nth-child(#{$i}) {
      // font-size: .4em * $i;
      .icon-item{
        background-image: url('../assets/images/icon-tab#{$i - 1}.png')
      }
      &.act{
        .icon-item{
          background-image: url('../assets/images/icon-tab#{$i - 1}-act.png')
        }
        color:$themeColor;
      }
    }
  }
}
</style>
